<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/Font-Awesome-master/css/font-awesome.min.css">
    <script src="/js/jquery-2.1.1.min.js"></script>
    <script src="/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
    <style>
        .grid {
            padding: 4px;
        }
        .grid li {
            width: 28px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            border: 1px solid #e6e6e6;
            border-top-color: rgb(230, 230, 230);
            border-right-color: rgb(230, 230, 230);
            border-bottom-color: rgb(230, 230, 230);
            border-left-color: rgb(230, 230, 230);
            margin: 4px;
            text-align: center;
            border-radius: 1px;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            float: left;
            list-style: none;
        }
        .grid li:hover {
            background: #1E9FFF;
            color: #fff;
            border-color: #1E9FFF;
        }
        .sizing {
            display: none;
            position: absolute;
            left: 0;
            top: 37px;
            width: 100%;
            background: #fff;
            border: 1px solid #D2D2D2;
            border-radius: 0 0 2px 2px;
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
            height: 246px;
            overflow: auto;
            z-index: 10;
        }
        .icon_search {
            margin: 8px 8px 0;
        }
        .edui-default .edui-editor{
            z-index: 0 !important;
        }
        .images{
            max-width: 200px;
            max-height: 200px;
        }
    </style>
    {block name="css"}
    {/block}
</head>
<body>

<div class="layui-form" style="padding: 20px 0 0 0;">
    {if isset($input)}
    {foreach $input as $v}
    {if $v['type'] == 'text'}
    <div class="layui-form-item">
        <label class="layui-form-label">{$v.name}</label>
        <div class="layui-input-inline">
            <input type="text" name="{$v.key}" {if isset($v.disabled)} disabled {/if} {if isset($v.required)} value="{$v.required}" {/if} {if isset($v.verify)} lay-verify="{$v.verify}" {/if} placeholder="请输入{$v.name}" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    {elseif $v['type'] == 'number'}
    <div class="layui-form-item">
        <label class="layui-form-label width">{$v['name']}:</label>
        <div class="layui-input-block" style="width:40%">
            <input type="number" maxlength="80" name="{$v['key']}"
            {if isset($v.disabled)} disabled {/if}
            {if isset($v.required)} value="{$v.required}" {/if}
            {if isset($v.verify)} lay-verify="{$v.verify}" {/if}
            placeholder="请输入数字" autocomplete="off" class="layui-input">
        </div>
    </div>
    {elseif $v['type'] == 'password'}
    <div class="layui-form-item">
        <label class="layui-form-label">{$v.name}</label>
        <div class="layui-input-inline">
            <input type="password" name="{$v.key}" {if isset($v.disabled)} disabled {/if} {if isset($v.verify)} lay-verify="{$v.verify}" {/if} placeholder="请输入{$v.name}" autocomplete="off"
            class="layui-input">
        </div>
    </div>
    {elseif $v['type'] == 'y_image'}
    <div class="layui-form-item">
        <label class="layui-form-label">{$v.name}</label>
        <div class="layui-input-inline">
            <input type="text" name="{$v.key}" {if isset($v.verify)} lay-verify="{$v.verify}" {/if} placeholder="请上传图片" autocomplete="off"
            class="layui-input">
        </div>
        <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-{$v.key}">上传图片</button>
    </div>
    {elseif $v['type'] == 'image'}
    <div class="layui-form-item">
        <label class="layui-form-label">{$v.name}</label>
        <div class="layui-input-inline">
            <input type="text" name="{$v.key}" {if isset($v.verify)} lay-verify="{$v.verify}" {/if} placeholder="请上传图片" autocomplete="off"
                   class="layui-input">
            <input type="hidden" name="file_id">
        </div>
        <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-{$v.key}">上传图片</button>
    </div>
    {elseif $v['type'] == 'file'}
    <div class="layui-form-item">
        <label class="layui-form-label">{$v.name}</label>
        <div class="layui-input-inline">
            <input type="text" name="{$v.key}" {if isset($v.verify)} lay-verify="{$v.verify}" {/if} placeholder="请上传文件" autocomplete="off"
            class="layui-input">
            <input type="hidden" name="file_id">
        </div>
        <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-{$v.key}">上传文件</button>
    </div>
    {elseif $v['type'] == 'radio'}
    <div class="layui-form-item" lay-filter="sex">
        <label class="layui-form-label">{$v.name}</label>
        <div class="layui-input-block">
            {foreach $v['data'] as $kk=>$vv}
            <input type="radio" name="{$v.key}" value="{$kk}" title="{$vv}" {if isset($v.disabled)} disabled {/if} {if isset($v.required) && $v.required == $kk} checked {/if}>
            {/foreach}
        </div>
    </div>
    {elseif $v['type'] == 'select'}
    <div class="layui-form-item">
        <label class="layui-form-label">{$v['name']} :</label>
        <div class="layui-input-inline">
            <select id="select_{$v['key']}" name="{$v['key']}" lay-filter="{$v['key']}" {if isset($v.verify)} lay-verify="{$v.verify}" {/if}>
                <option value="">请选择</option>
                {foreach $v.select_data as $kk=>$vv}
                <option value="{$vv.id}" {if isset($v.required) && $v.required == $kk} selected {/if}>{$vv.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    {if isset($v.ld)}
    <div class="layui-form-item">
        <label class="layui-form-label">{$v['ld']['name']} :</label>
        <div class="layui-input-inline">
            <select id="select_{$v['ld']['key']}" name="{$v['ld']['key']}" lay-filter="{$v['ld']['key']}" {if isset($v.ld.verify)} lay-verify="{$v.ld.verify}" {/if}>
            <option value="">请选择</option>
            </select>
        </div>
    </div>
    {if isset($v.ld.add)}
    <div id="select_add_{$v.ld.key}"></div>
    {/if}
    {if isset($v.ld.ld)}
    <div class="layui-form-item">
        <label class="layui-form-label">{$v['ld']['ld']['name']} :</label>
        <div class="layui-input-inline">
            <select id="select_{$v['ld']['ld']['key']}" name="{$v['ld']['ld']['key']}" lay-filter="{$v['ld']['ld']['key']}" {if isset($v.ld.ld.verify)} lay-verify="{$v.ld.ld.verify}" {/if}>
            <option value="">请选择</option>
            </select>
        </div>
    </div>
    {if isset($v.ld.ld.add)}
    <div id="select_add_{$v.ld.ld.key}"></div>
    {/if}
    {/if}
    {/if}
    {elseif $v['type'] == 'textarea'}
    <!--多行文本-->
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label width">{$v['name']}:</label>
        <div class="layui-input-block" style="padding: 20px;">
            <textarea name="{$v['key']}" {if isset($v.disabled)} disabled {/if} {if isset($v.verify)} lay-verify="{$v.verify}" {/if} placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    {elseif $v['type'] == 'content'}
    <div class="layui-form-item">
        <label class="layui-form-label">{$v.name}</label>
        <div class="layui-input-block" style="width: 70%">
            <script id="content_{$v['key']}"  type="text/plain"></script>
            <textarea name="{$v['key']}" id="content_val_{$v['key']}" style="display: none;"></textarea>
        </div>
    </div>
    {elseif $v['type'] == 'icon'}
    <div class="layui-form-item">
        <label class="layui-form-label">{$v.name}</label>
        <div class="layui-input-inline" style="position:relative;">
            <input type="text" name="{$v.key}" autocomplete="off" class="layui-input">
            <span  class="{$v.key}_icon_select_action layui-btn layui-btn-primary" style="position: absolute;right: -94px;top:0px;">搜索图标</span>
            <div class="icon_select_options sizing" style="display: none;">
                <div class="loading {$v.key}_icon">
                    图标加载中...　<a href="http://code.zoomla.cn/boot/font.html" target="_blank">访问图标原站点</a>
                </div>
            </div>
        </div>
    </div>

    {/if}
    {/foreach}
    {else}
    缺少input表单配置数据
    {/if}
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
    </div>
</div>

<script>

    layui.config({
        base: '/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload','layer'], function () {
        var $ = layui.$
            , form = layui.form
            , upload = layui.upload;
        "{foreach $input as $v}"
        /*accepMime  设置的类型可以参考W3C：  https://www.w3school.com.cn/media/media_mimeref.asp */
        "{if $v.type == 'icon'}"
        $('.icon_icon_select_action').css({right:'-104px'})
        $('.'+"{$v.key}"+'_icon_select_action').click(function(){
            console.log(123);
            if ($('.'+"{$v.key}"+'_icon_select_action').closest('.layui-input-inline').find(".sizing").css('display') == 'block') {
                $('.'+"{$v.key}"+'_icon_select_action').closest('.layui-input-inline').find(".sizing").hide();
                $(this).html('搜索图标');
                return false;
            }
            $(".sizing").hide();
            $('.'+"{$v.key}"+'_icon_select_action').closest('.layui-input-inline').find(".sizing").show();

            $(this).html('关闭图标');
            var len =  $('.'+"{$v.key}"+'_icon_select_action').closest('.layui-input-inline').find(".loadding").show().find('li').length;
            if (len <= 0) {
                $.ajax({
                        url:"{:url('api/getAwesome')}",
                        success:function(res){
                            var data = res.data;
                            var html = '<div class="icon_search"><input placeholder="输入关键词搜索" class="layui-input icon_search_input"></div><ul class="grid">';
                            for (i in data) {
                                html += '<li><i class="fa '+ data[i] +'" aria-hidden="true"></i></li>';
                            }
                            html += '</ul>';
                            console.log($('.'+"{$v.key}"+'_icon_select_action').closest('.layui-input-inline').find(".loadding"));
                            console.log(html);
                            $('.' + "{$v.key}" + "_icon").html(html);
                        }
                    })
            }
        })
        $('body').on('click', ".{$v.key}_icon"+' .grid li', function(){
            var className = $(this).find('i').attr('class');
            console.log(className);
            $(this).closest('.layui-input-inline').find('input').val(className);
            $(this).closest('.layui-input-inline').find('.sizing').hide();
            $(this).closest('.layui-input-inline').find('.'+"{$v.key}"+'_icon_select_action').html('搜索图标');
        })
        "{elseif $v.type == 'y_image'}"
        upload.render({
            elem: '#layuiadmin-upload-'+"{$v.key}"
            , url: "{:url('file_y')}"
            , accept: 'images'
            , method: 'post'
            , acceptMime: 'image/*'
            , done: function (res) {
                if(res.code == 200){
                    layer.msg('上传成功');
                    console.log(res.data);
                    $(this.item).prev("div").children("input").val(res.data.file)
                }else{
                    layer.msg(res.message);
                }
            }
        });
        "{elseif $v.type == 'image'}"
        upload.render({
            elem: '#layuiadmin-upload-'+"{$v.key}"
            , url: "{:url('file')}"
            , accept: 'images'
            , method: 'post'
            , acceptMime: 'image/*'
            , done: function (res) {
                if(res.code == 200){
                    layer.msg('上传成功');
                    $(this.item).prev("div").children("input").eq(0).val(res.data.name+'.'+res.data.ext)
                    $(this.item).prev("div").find("input").eq(1).val(res.data.id);
                }else{
                    layer.msg(res.message);
                }
            }
        });
        "{elseif $v.type == 'file'}"
        upload.render({
            elem: '#layuiadmin-upload-'+"{$v.key}"
            , url: "{:url('file')}"
            , accept: 'file'
            , method: 'post'
            , done: function (res) {
                if(res.code == 200){
                    layer.msg('上传成功');
                    $(this.item).prev("div").children("input").eq(0).val(res.data.name+'.'+res.data.ext)
                    $(this.item).prev("div").find("input").eq(1).val(res.data.id);
                }else{
                    layer.msg(res.message);
                }
            }
        });
        "{elseif $v.type == 'select' && isset($v.ld)}"
        form.on('select('+"{$v.key}"+')', function (data) {
            var select_msg = '<option value=\"\">请选择</option>';
            var val = data.value;
            if(val.length > 0){
                $.post("{:url('ld')}",{
                    table:"{$v.ld.table}",
                    key:"{$v.key}",
                    val:val
                },function(res){
                    $('#select_'+"{$v.ld.key}").html('');
                    var regionListHTML = select_msg;
                    for (var i=0; i<res.data.data.length; i++){
                        regionListHTML+='<option value="'+res.data.data[i].id+'">'+res.data.data[i].name+'</option>'
                    }
                    $('#select_'+"{$v.ld.key}").html(regionListHTML);
                    "{if isset($v.ld.ld)}"
                    $('#select_'+"{$v.ld.ld.key}").html(select_msg);
                    "{/if}"
                    "{if isset($v.ld.ld.ld)}"
                    $('#select_'+"{$v.ld.ld.ld.key}").html(select_msg);
                    "{/if}"
                    form.render();
                    "{if isset($v.ld.ld)}"
                    form.on('select('+"{$v.ld.key}"+')', function (data) {
                        var val = data.value;
                        if(val.length > 0){
                            $.post("{:url('ld')}",{
                                table:"{$v.ld.ld.table}",
                                key:"{$v.ld.key}",
                                val:val
                            },function(res){
                                $('#select_'+"{$v.ld.ld.key}").html('');
                                var regionListHTML = select_msg;
                                for (var i=0; i<res.data.data.length; i++){
                                    regionListHTML+='<option value="'+res.data.data[i].id+'">'+res.data.data[i].name+'</option>'
                                }
                                $('#select_'+"{$v.ld.ld.key}").html(regionListHTML);
                                "{if isset($v.ld.ld.ld)}"
                                $('#select_'+"{$v.ld.ld.ld.key}").html(select_msg);
                                "{/if}"
                                form.render();
                                "{if isset($v.ld.ld.ld)}"
                                form.on('select('+"{$v.ld.ld.key}"+')', function (data) {
                                    var val = data.value;
                                    if(val.length > 0){
                                        $.post("{:url('ld')}",{
                                            table:"{$v.ld.ld.ld.table}",
                                            key:"{$v.ld.ld.key}",
                                            val:val
                                        },function(res){
                                            $('#select_'+"{$v.ld.ld.ld.key}").html('');
                                            var regionListHTML = select_msg;
                                            for (var i=0; i<res.data.data.length; i++){
                                                regionListHTML+='<option value="'+res.data.data[i].id+'">'+res.data.data[i].name+'</option>'
                                            }
                                            $('#select_'+"{$v.ld.ld.ld.key}").html(regionListHTML);
                                            form.render();
                                        },'json')
                                    }
                                });
                                "{/if}"
                            },'json')
                        }
                    });
                    "{elseif isset($v.ld.add)} && isset($v.ld.add.table[0]['table'])"
                    form.on('select('+"{$v.ld.key}"+')', function (data) {
                        var val = data.value;
                        if(val.length > 0){
                            var product_id = data.value;
                            if(product_id.length > 0){
                                var table = "{$v.ld.add.table[0]['table']}";
                                $.post("{:url('ld')}",{
                                    table:table,
                                    key:"{$v.ld.key}",
                                    val:product_id
                                },function(res){
                                    console.log(res,724);
                                    var html = '';
                                    "{if isset($v.ld.add.table[1]['table'])}"
                                    for (var i = 0;i<res.data.data.length;i++){
                                        html += "<div class=\"layui-form-item\">\n" +
                                            "    <label class=\"layui-form-label width\">"+res.data.data[i].name+":</label>\n" +
                                            "    <div class=\"layui-input-inline\" >\n" +
                                            "        <select name=\"specification_value_ids[" + res.data.data[i].id + "]\" lay-verify=\"required\" id=\"key_"+res.data.data[i].id+"\">\n" +
                                            "        </select>\n" +
                                            "    </div>\n" +
                                            "</div>";
                                        var num = 0;
                                        $.post("{:url('ld')}",{
                                            table:"{$v.ld.add.table[1]['table']}",
                                            key:"{$v.ld.add.table[1]['key']}",
                                            val:res.data.data[i].id
                                        },function(list){
                                            var valhtml = select_msg;
                                            for (var s=0; s<list.data.data.length;s++){
                                                valhtml +='<option value="'+list.data.data[s].id+'">ID:'+list.data.data[s].id+'=>'+list.data.data[s].name+'</option>'
                                            }
                                            $('#key_'+list.data.id).html(valhtml);
                                            form.render();
                                            num++;
                                        },'json')
                                    }
                                    $('#select_add_'+"{$v.ld.key}").html(html);
                                    "{else}"
                                    "{/if}"

                                    form.render();
                                },'json')
                            }
                        }
                    });
                    "{/if}"
                },'json')
            }
        });
        "{/if}"
        "{/foreach}"
        //自定义验证
        form.verify({
            nickname: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }
            ,fd_number:[/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,'只支持2位小数的数字']
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]

            //确认密码
            ,repass: function(value){
                if(value !== $('#LAY_password').val()){
                    return '两次密码输入不一致';
                }
            }
        });
        $('body').on('keyup', '.icon_search_input', function(){
            var keyword  = $.trim($(this).val());
            if (!keyword) {
                $(this).closest('.icon_select_options').find('li').show();
            } else {
                $(this).closest('.icon_select_options').find('li').each(function(){
                    var className = $(this).find('i').attr('class');
                    if (className.indexOf(keyword) >=0) {
                        $(this).show()
                    } else {
                        $(this).hide()
                    }
                })
            }
        })

    })
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="/plug/UEditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/plug/UEditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    "{foreach $input as $v}"
    "{if $v['type'] == 'content'}"
    "{if isset($v.readonly)}"
    var ue = UE.getEditor('content_'+"{$v['key']}",{
        initialFrameHeight:400,
        readonly : true,
    }).ready(function() {
        UE.getEditor('content_'+"{$v['key']}").addListener('contentChange',function(){
            var html = UE.getEditor('content_'+"{$v['key']}").getContent();
            console.log(html,111);
            $("#content_val_"+"{$v['key']}").val(html);
        })
    });

    "{else}"
    UE.getEditor('content_'+"{$v['key']}",{
        initialFrameHeight:400
    }).ready(function() {
        UE.getEditor('content_'+"{$v['key']}").addListener('contentChange',function(){
            var html = UE.getEditor('content_'+"{$v['key']}").getContent();
            console.log(html,222);
            $("#content_val_"+"{$v['key']}").val(html);
        })
    });
    "{/if}"
    "{/if}"
    "{/foreach}"
</script>
</body>
</html>